<script setup>
import {ref} from 'vue'
import {
  addUserService,
  deleteUserService,
  getUsersService,
  updateStatusService,
  updateUserService
} from "@/api/user.js";//用户
import {ElMessage, ElMessageBox} from "element-plus";
import {roleListService, updateUserRoleService} from "@/api/role.js";

const roleList = ref([])//角色列表
const totalpage = ref(0)//总页数
const dialogVisible = ref(false)//弹框显示
const queryConfig = ref({//查询条件
  query: {},//搜索条件
  pagenum: 1,//当前页码
  pagesize: 10//每页条数
})//查询条件
const userList = ref([])//用户列表
const getInit = async () => {//初始化
  roleList.value = await roleListService()//获取角色列表
  const res = await getUsersService(queryConfig.value)//获取用户列表
  userList.value = res.users//用户列表
  totalpage.value = res.total//总页数
}//初始化
const userForm = ref({//表单数据
  username: '',//用户名
  password: '',//密码
  email: '',//邮箱
  mobile: ''//手机号
})//表单数据
const rules = {//表单验证
  username: [//用户名
    {required: true, message: '请输入用户名', trigger: 'blur'},//必填
    {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}//3-10
  ],//用户名
  password: [//密码
    {required: true, message: '请输入密码', trigger: 'blur'},//必填
    {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}//6-15
  ],//密码
  email: [//邮箱
    {type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change']}//邮箱验证
  ],//邮箱
  mobile: [
    {pattern: /^1[1-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur'}//手机号验证
  ]//手机号
}//表单验证
const userFormRef = ref()//表单验证
const addSubmit = async () => {//新增
  await userFormRef.value.validate()//验证表单
  await addUserService(userForm.value)//新增用户
  queryConfig.value.pagenum = Math.ceil(totalpage.value / queryConfig.value.pagesize)//当前页码
  await getInit()//初始化
  dialogVisible.value = false//关闭弹框
  ElMessage.success('新增用户成功！')//成功
}//新增

const updateStatus = async (row) => {//状态
  await updateStatusService(row.id, !row.mg_state)//更新状态
  await getInit()//初始化
  ElMessage.success('设置状态成功！')//成功
}//状态
const removeUser = async (row) => {//删除
  await ElMessageBox.confirm('此操作将永久删除该用户, 是否继续?', '提示', {//弹框
    confirmButtonText: '确定',//确定
    cancelButtonText: '取消'//取消
  })//弹框
  //await getUsersService(queryConfig.value)
<<<<<<< HEAD
  await deleteUserService(row.id)//删除用户
  await getInit()//初始化
  ElMessage.success('删除成功!')//成功
}//删除
const edit = ref(false)//编辑
const userUpdateRef = ref()//表单验证
const editUser = async (row) => {//编辑
  userForm.value = row//表单数据
  edit.value = true//编辑
}//编辑
const updateSubmit = async () => {//修改
  userUpdateRef.value.validate()//验证表单
  await updateUserService(userForm.value)//修改用户
  await getInit()//初始化
  ElMessage.success('修改用户信息成功！')//成功
  edit.value = false//编辑
}//修改

const changeRole =async (user_id, role_id) => {//修改角色
  await updateUserRoleService(user_id,role_id)//修改角色
  ElMessage.success("修改角色成功")//成功
}//修改角色
=======
  await deleteUserService(row.id)
  await getInit()
  ElMessage.success('删除成功!')
}
const edit = ref(false)
// 编辑
const userUpdateRef = ref()
const editUser = async (row) => {
  userForm.value = row
  edit.value = true
}
const updateSubmit =async ()=>{
  userUpdateRef.value.validate()
  await updateUserService(userForm.value)
  await getInit()
  ElMessage.success('修改用户信息成功！')
  edit.value = false
}
>>>>>>> 6ce0f859b4e893dc690ff84a1db458a15cf0aabd
getInit()
</script>
<template>
  <el-card>
    <template #header>
      <div class="header">
        <h2>用户列表</h2>
        <el-button type="primary" @click="dialogVisible=true">新增用户</el-button>
      </div>
    </template>
    <el-table :data="userList">
      <el-table-column type="index" label="序号" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名" width="140"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="mobile" label="手机号"></el-table-column>
      <el-table-column prop="create_time" label="创建时间"></el-table-column>
      <el-table-column label="角色" width="200">
        <template #default="{row}">
          <el-select v-model="row.role_name">
            <el-option @click="changeRole(row.id,item.id)" v-for="item in roleList" :key="roleList.id"
                       :value="item.roleName"></el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="mg_state" label="状态" width="80">
        <template #default="{row}">
          <el-tag :type="row.mg_state?'success':'danger'">{{ row.mg_state ? '正常' : '禁用' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" @click="updateStatus(row)">修改状态</el-button>
          <el-button type="primary" @click="editUser(row)">编辑</el-button>
          <el-button type="danger" @click="removeUser(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :page-sizes="[10, 15, 20,25,30]"
                     :total="totalpage"
                     :page-size="queryConfig.pagesize"
                     :current-page="queryConfig.pagenum"
                     @update:pageSize="(val)=>{queryConfig.pagesize=val;getInit()}"
                     @update:currentPage="(val)=>{queryConfig.pagenum=val;getInit()}"
                     @prevClick="getInit"
                     @nextClick="getInit"/>
    </div>

    <el-drawer title="新增用户" v-model="dialogVisible">
      <el-form :model="userForm" ref="userFormRef" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="userForm.password"/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"/>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userForm.phone"/>
        </el-form-item>
        <el-button type="primary" @click="addSubmit">提交</el-button>
      </el-form>
    </el-drawer>
    <el-drawer title="编辑用户" v-model="edit">
      <el-form :model="userForm" ref="userUpdateRef" label-width="80px" :rules="rules">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userForm.username" disabled/>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="userForm.email"/>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input v-model="userForm.mobile"/>
        </el-form-item>
        <el-button type="primary" @click="updateSubmit">提交</el-button>
      </el-form>
    </el-drawer>
  </el-card>
</template>

<style lang="scss" scoped>
.el-card {
  .header {
    display: flex;
    justify-content: space-between;
  }

  .page {
    display: flex;
    justify-content: center;

    .el-pagination {
      margin: 20px auto;
    }
  }

  .el-drawer {
    .el-button {
      width: 100%;
    }
  }

}
</style>

